GodTier.Views['tournamentList'] = Backbone.View.extend( {

    initialize: function() {

        this.render();
       
        return this;
    },

    render: function() {

       this.$el.height( this.options.containerHeight ).css( { 'overflow': 'auto' } );

       _.each( this.options.tournamentCollection.models,
               function( element, index, list ) { this.createTournamentHtml( element ); },
               this );
    },

    createTournamentHtml: function( tournamentModel ) {

        var innerDiv =
            this.makeEl( 'div' ).css( { 'border': '1px black solid',
                                        'padding': '.5em',
                                        'margin': '.5em',
                                        'background-color': 'pink',
                                        'position': 'absolute' } ).append(
                this.makeEl('div').css( { 'float': 'left', 'padding': '.5em' } ).text( tournamentModel.get('name') ),
                this.makeEl('div').css( { 'float': 'left', 'padding': '.5em' } ).text( tournamentModel.get('tournamentDate') ),
                this.makeEl('div').css( { 'float': 'left', 'padding': '.5em' } ).text( tournamentModel.get('tournamentTime') ),
                this.makeEl('div').css( { 'clear': 'both' } ) );
       
        var outerDiv = this.makeEl( 'div' ).css( { 'position': 'relative', 'margin': '1em' } );

        this.$el.append( outerDiv.append( innerDiv ) );

        outerDiv.height( innerDiv.outerHeight( true ) );

        GodTier.CommonLib.centerEl( { el: innerDiv, parentEl: outerDiv } );
    }

} );
